import { defineComponent } from 'vue';
import EditTextarea from '../editTextarea';
import useModule from './index.module';
import styles from './index.module.scss';
import CodeDiff from '../codeDiff';
import ConfigSetting from '../configSetting';

export default defineComponent({
  name: 'CompareControl',
  inheritAttrs: false,
  setup(_props, { attrs }: any) {
    const {
      methods,
      before,
      after,
      compareDiff,
      showResult,
      showConfig,
      config
    } = useModule({ attrs });
    return () => (
      <div class={styles.compareControlContainer}>
        {
          showConfig.value && <ConfigSetting
            {
              ...{
                attrs,
                on: {
                  'update': val => {
                    config.value = val;
                  }
                }
              }
            }
          />
        }
        <div class={styles.compareControlMain}>
          <el-switch
            v-model={showConfig.value}
            active-text={'展开配置栏'}
            inactive-text={'隐藏配置栏'}>
          </el-switch>
          <div class={styles.compareControl}>
            <div
              class={styles.contentArea}
              style={{
                display: !showResult.value ? 'block' : 'none'
              }}
            >
              <div class={styles.display}>
                <div class={styles.area}>
                  <h2>原始文本：</h2>
                  <div class={styles.editArea}>
                    <EditTextarea
                      v-model={before.value}
                    />
                  </div>
                </div>
                <div class={styles.area}>
                  <h2>更新后文本：</h2>
                  <div class={styles.editArea}>
                    <EditTextarea
                      v-model={after.value}
                    />
                  </div>
                </div>
              </div>
              <div class={styles.control}>
                <el-button
                  type='primary'
                  onClick={methods.checkDiff}
                >
                  寻找差异
                </el-button>
              </div>
            </div>
            <div
              class={styles.resultArea}
              style={{
                display: showResult.value ? 'block' : 'none'
              }}
            >
                <div class={styles.result}>
                  <h2>比较结果：</h2>
                  <CodeDiff
                    oldString={compareDiff.value[0]}
                    newString={compareDiff.value[1]}
                    mode={config.value.mode}
                    outputFormat={config.value.outputFormat}
                    language={config.value.language}
                    trim={config.value.trim}
                    maxHeight={config.value.maxHeight}
                    filename={config.value.filename}
                    context={config.value.context}
                  />
                </div>
                {
                  !attrs.value && <div class={styles.control}>
                    <el-button
                      type='primary'
                      onClick={methods.returnBack}
                    >
                      返回
                    </el-button>
                  </div>
                }
            </div>
          </div>
        </div>
      </div>
    )
  }
})
